<template>
    <div>
        <LeaseFileUpload :modal="false"  @afterUpload="messageUpload" @deleteFile="deleteFile"></LeaseFileUpload>
        <Row :gutter="20">
            <i-col :key="`infor-${i}`" :lg="4" :md="8" :xs="12" style="height: 120px;padding-bottom: 10px;"
                   v-for="(infor, i) in inforCardData">
                <infor-card :color="infor.color" :icon="infor.icon" :icon-size="36" shadow>
                    <count-to :end="infor.count" count-class="count-style"/>
                    <p>{{ infor.title }}</p>
                </infor-card>
            </i-col>
        </Row>
        <Row :gutter="20" style="margin-top: 10px;">
            <i-col :lg="8" :md="24" style="margin-bottom: 20px;">
                <Card shadow>
                    <chart-pie :value="pieData" style="height: 300px;" text="用户访问来源"></chart-pie>
                </Card>
            </i-col>
            <i-col :lg="16" :md="24" style="margin-bottom: 20px;">
                <Card shadow>
                    <chart-bar :value="barData" style="height: 300px;" text="每周用户活跃量"/>
                </Card>
            </i-col>
        </Row>
        <Row>
            <Card shadow>
                <example style="height: 310px;"/>
            </Card>
        </Row>
    </div>
</template>

<script>
    import InforCard from '_c/info-card'
    import CountTo from '_c/count-to'
    import {ChartPie, ChartBar} from '_c/charts'
    import Example from './example.vue'
    import LeaseFileUpload from '_c/file-upload/index'
    export default {
        name: 'home_index',
        components: {
            InforCard,
            CountTo,
            ChartPie,
            ChartBar,
            Example,
            LeaseFileUpload
        },
        data() {
            return {
                inforCardData: [
                    {title: '新增用户', icon: 'md-person-add', count: 803, color: '#2d8cf0'},
                    {title: '累计点击', icon: 'md-locate', count: 232, color: '#19be6b'},
                    {title: '新增问答', icon: 'md-help-circle', count: 142, color: '#ff9900'},
                    {title: '分享统计', icon: 'md-share', count: 657, color: '#ed3f14'},
                    {title: '新增互动', icon: 'md-chatbubbles', count: 12, color: '#E46CBB'},
                    {title: '新增页面', icon: 'md-map', count: 14, color: '#9A66E4'}
                ],
                pieData: [
                    {value: 335, name: '直接访问'},
                    {value: 310, name: '邮件营销'},
                    {value: 234, name: '联盟广告'},
                    {value: 135, name: '视频广告'},
                    {value: 1548, name: '搜索引擎'}
                ],
                barData: {
                    Mon: 13253,
                    Tue: 34235,
                    Wed: 26321,
                    Thu: 12340,
                    Fri: 24643,
                    Sat: 1322,
                    Sun: 1324
                }
            }
        },
        methods:{
            messageUpload(uploadInfo){
                console.log(uploadInfo);
                this.$Message.info("上传文件"+JSON.stringify(uploadInfo));
            },
            deleteFile(fileInfo){
                console.log(fileInfo);
                this.$Message.info("删除文件"+JSON.stringify(fileInfo));
            }
        },
        mounted() {
            //
        }
    }
</script>
